<template>
    <div class="page-containter">
		<uni-nav-bar fixed shadow :border="false" :title="'【问卷】'  + (detail && detail.name || '')" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
        <div class="page-content" v-if="detail">
          <div class="source fs-14 fc-fff ellipsis" v-if="detail.parentName">来源：{{detail.parentName}}</div>
          <div class="page-title page-title-bg fs-24">
              <span class="title fs-24 ellipsis2">{{detail.name}}</span>
              <div class="desc fs-14 fc-fff" >
                来自：{{detail.siteName}}
              </div>
            </div>

            <div class="common-wrap content-wrap">
                <div class="group-wrap">
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">开始时间：</div>
                        <div class="group-text fs-14 fc-333">{{detail.startDate}}</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">结束时间：</div>
                        <div class="group-text fs-14 fc-333">{{detail.endDate || '不限制'}}</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">答题时长：</div>
                        <div class="group-text fs-14 fc-333">{{getTime(detail.timeLimit)}}</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">每题必答：</div>
                        <div class="group-text fs-14 fc-333">{{ detail.isAllAnswer == 1 ? '是' : '否' }}</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">答题次数：</div>
                        <div class="group-text fs-14 fc-333">{{allowList[detail.isAllowManytime]}}</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">问题数量：</div>
                        <div class="group-text fs-14 fc-333">{{ detail.totalQuestionsNum }}题</div>
                    </div>
                    <div class="group-wrap-item flex-wrap flex-middle">
                        <div class="group-label">校验码：</div>
                        <div class="group-text fs-14 fc-333">{{ detail.isCheckPassword === '1' ? '需要' : '不需要' }}</div>
                    </div>
                </div>
            </div>
            <div class="common-wrap" v-if="detail.brief">
                <div class="brief-wrap">
                    <div class="exam-title fs-14 fc-999">问卷介绍：</div>
                    <div class="exam-text"  v-html="getContent(detail.brief)"></div>
                </div>
            </div>
            <div class="btn-wrap flex-wrap flex-middle">
                <button
                round
                class="btn"
                v-if="detail.status === 'I' || detail.status === 'Q'"
                :loading="btnStatus"
                @click="toDetail"
                type="primary">{{statusList[detail.status]}}</button>
                <button
                round
                class="btn"
                v-else-if="detail.status === 'N'"
                :loading="btnStatus"
                @click="toDetail"
                type="primary">{{statusList[detail.status]}}</button>
                <button
                class="btn btn-overdue"
                round
                v-else>{{statusList[detail.status]}}</button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
import { getTime, getDiffTime, setLogin, getConfigName } from '@/assets/js/util'
import {manaTypes} from "@/assets/js/constant";
import mockData from "@/mock/survey/detail.json"
export default {
    head() {
        return {
            title: this.detail && this.detail.name,
        }
    },
    data() {
        return {
            detail: null,
            id: '',
            isAllowAnonymous: '',
            listData: [],
            statusList: {
                'P': '已参与',
                'I': '继续',
                'N': '开始答题',
                'Q': '再次参与',
                'O': '已过期'
            },
            allowList: ['只答一次', '每天一次', '不限制'],
            btnStatus: false
        }
    },
	onLoad(query) {
		
	},
    onShow() {
        this.initPage()
    },
    methods: {
        onClickLeft() {
          uni.navigateBack({ delta: 1 })
        },

        initPage() {
            this.getInfo()
        },

        getInfo() {
			this.detail=mockData.data;
        },


        getContent(brief) {
            brief = brief || ''
            try {
                return decodeURIComponent(brief)
            } catch (e) {
                return brief
            }
        },

        toDetail() {
                this.$uniPush({
                    name: 'questionnaire-detail-id',
                    params: {
                        id: this.detail.surveyId
                    }
                }) 
        },

        getTime(s) {
            return getTime(s)
        },
        getDiffTime(s) {
            return getDiffTime(s.split(/[\-,\:,\ ]/g), true)
        },
    }
}
</script>
<style lang="scss" scoped>
.page-containter {
    background: #F5F8F8;
    padding-bottom: 70px;
    min-height: 100vh;
    .desc{
        height: auto;
    }
    .page-content{
        position: relative;
        z-index: 2;
        .source {
          width: 345px;
          height: 32px;
          background: rgba(0,0,0,0.6);
          border-radius: 6px;
          text-align: center;
          position: absolute;
          line-height: 32px;
          top: 8px;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: 5;
        }
        .page-bg{
            position: fixed;
            z-index: -1;
            
        }
    }
    .page-title{
      padding: 60px 0 30px;
      line-height: 34px;
      min-height: 200px;
      color: #fff;
      text-align: center;
      z-index: 2;
      .title {
        margin: 0 auto;
      }
    }

    .page-text{
        position: relative;
        padding: 15px 50px 30px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        z-index: 2;
        &.empty{
            padding: 0 50px 30px;
        }
    }
    .common-wrap{
        position: relative;
        z-index: 10;
        width: calc(100% - 30px);
        border-radius: 6px;
        margin: 0 auto;
        top: -30px;
        background: #FFFFFF;
        box-shadow: 0px 8px 30px 0px rgba(226, 233, 232, 0.47);
        &+ .common-wrap{
            margin-top: 15px;
        }
        &.content-wrap{
            position: relative;
            padding: 10px 15px 10px;
            .user-wrap{
                position: absolute;
                width: 100%;
                top: -30px;
                left: 0;
                .photo-wrap{
                    width: 60px;
                    height: 60px;
                    border: 2px solid #FFFFFF;
                    border-radius: 50%;
                    overflow: hidden;
                    background: #fff;
                    margin: 0 auto 6px;
                    img{
                        width: 100%;
                    }
                }
                .name-wrap{
                    font-weight: 500;
                    line-height: 22px;
                    text-align: center;
                }
            }
            .group-wrap{
                padding: 10px 0;
                .group-wrap-item{
                    padding: 10px 0;
                }
                .group-label{
                    font-size: 14px;
                    line-height: 20px;
                    color: #999;
                    min-width: 75px;
                }
                .group-text{
                    flex: 1;
                    margin-left: 10px;
                    //text-align: right;
                }
                .group-btn{
                    padding-left: 8px;
                    margin-left: 3px;
                    border-left: 1px solid #ddd;
                }
            }
            .exam-wrap{
                border-top: 1px solid #EEEEEE;
                .exam-title{
                    padding: 10px 0 5px;
                    line-height: 20px;
                    color: #999;
                }
                .exam-text{
                    font-size: 14px;
                    line-height: 24px;
                    color: #666;
                }
            }
        }
        .brief-wrap{
            padding: 15px 0;
            .exam-text{
                font-size: 14px;
                line-height: 24px;
                color: #333;
            }
        }
    }
    .btn-wrap{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 8px 15px;
        border-top: 1px solid #EEEEEE;
        background: #fff;
        z-index: 1000;
		:deep(uni-button){
			font-size: 14px !important;
		}
        button {
            width: 100%;
            height: 40px;
            &.btn-overdue{
                color: #666;
                background: #F5F5F5;
            }
        }
    }
    .cer-draw-wrap{
        position: absolute;
        left: 15px;
        bottom: 70px;
        width: calc(100% - 30px);
        height: 50px;
        background: #FFFFFF;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        border: 1px solid #EEEEEE;
        padding: 0 15px;
        button {
            width: 72px;
            height: 28px;
            padding: 0 2px;
            border: none;
            background: linear-gradient(148deg, #FBD249 0%, #F5A623 100%);
        }
    }
}
</style>
